.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f3f3f3;

  .login-wrap {
    width: 100%;
    padding: 34px 44px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 15px rgba(#000, 0.1);

    .logo-box {
      margin: 0 auto;

      img {
        width: 166px;
        height: 32px;
      }
    }

    .login-form {
      color: #333;
      text-align: center;
    }

    .welcome {
      margin: 32px 0;
      font-size: 22px;
      font-weight: 700;
    }

    .eye-icon-container {
      position: absolute;
      right: 10px;
      bottom: 12px;
      width: 20px;
      height: 20px;

      .eye-icon {
        z-index: 1020;
        display: block;
        width: 100%;
        height: 100%;
        background: url('https://elifetransfer.s3.us-east-2.amazonaws.com/art/icon/sign_up/close_eye.png') no-repeat;
        background-position: center;
        background-size: 100%;
      }

      .open-eye-icon {
        z-index: 1020;
        display: block;
        width: 100%;
        height: 100%;
        background: url('https://elifetransfer.s3.us-east-2.amazonaws.com/art/icon/sign_up/open_eye.png') no-repeat;
        background-position: center;
        background-size: 100%;
      }
    }
  }
}

@media screen and (min-width: 992px) {
  // lg
  .login-container {
    .login-wrap {
      width: 480px;
    }
  }
}

@media screen and (min-width: 1440px) {
  // xxl
  .login-container {
    .login-wrap {
      width: 25%;
    }
  }
}
